import { useSelector, useDispatch } from 'react-redux'
import { login, logout } from '../store/user'
import { setClist } from '../store/clist'

// data 响应式状态数据修改会驱动 DOM 更新，驱动更新一定会 重新调用 MyBox
// state 全局状态管理的数据修改同理也会驱动 DOM 更新
// props 传递的数据修改也会驱动 DOM 更新
function MyBox() {

    // state 里面的数据获取
    const loginState = useSelector((state: any) => state.user.loginState)
    const userinfo = useSelector((state: any) => state.user.userinfo)
    const clist = useSelector((state: any) => state.clist.clist)

    console.log(loginState, userinfo, clist);

    // dispatch 方法获取
    const dispatch = useDispatch();



    return <>
        <h1>MyBox 组件</h1>
        <h2>用户名：{userinfo.name}</h2>
        <h3>{
            loginState ? '电话：' + userinfo.phone : '获取电话号码失败'
        }</h3>
        <button onClick={
            () => {
                dispatch(login({
                    name: '前端老兵',
                    role: 8,
                    phone: '18818881888'
                }))
            }
        }>点击模拟登录</button>
        <button onClick={()=>{
            dispatch(logout())
        }}>点击模拟退出</button>
    </>
}
export default MyBox